<!-- 产品资质 -->
<template>
    <div>
        <Modal :value="value" width="746" :closable="false" class-name="goods-aptitude-modal" :mask-closable="false">
            <div slot="header" >
                编辑产品许可证/审批/备案信息
                <Icon class="f-fr" type="ios-close" @click="closeModel"/>
            </div>
            <Form class="clearfix" :label-width="110" inline :model="goodsAptitudeForm" :rules="rule" ref="goodsAptitudeFormRef">
                <FormItem label="商品编码">
                    <Input disabled v-model="goodsInfo.codeTs" type="text" placeholder="商品编码"></Input>
                </FormItem>
                <FormItem label="商品名称">
                    <Input disabled v-model="goodsInfo.goodsName" type="text" placeholder="商品名称"></Input>
                </FormItem>
                <FormItem label="检验检疫名称">
                    <Input disabled v-model="goodsInfo.ciqName" type="text" placeholder="检验检疫名称"></Input>
                </FormItem>
                <FormItem label="备案序号">
                    <Input disabled v-model="goodsInfo.contrItem" type="text" placeholder="序号"></Input>
                </FormItem>
                <FormItem label="许可证类别" prop="licTypeCode" class="licTypeCode">
                    <RemoteSearch
                        v-model="goodsAptitudeForm.licTypeCode"
                        :disabled="editORshow"
                        placeholder="许可证类别"
                        :list="goodsLimitList"
                        keywordFiled="dataName"
                        valueField="dataCode"
                        :labelFieldList="['dataCode', 'dataName']"
                        @keyup.native="setFocus"
                        @on-get-name="v => goodsAptitudeForm.licTypeName = v"
                    />
                </FormItem>
                <FormItem label="许可证编号" prop="licenceNo">
                    <Input v-model="goodsAptitudeForm.licenceNo" type="text" placeholder="许可证编号" @keyup.native="setFocus" :disabled="editORshow" :maxlength="20"></Input>
                </FormItem>
                <FormItem label="核销货物序号" prop="licWrtofDetailNo">
                    <Input v-model="goodsAptitudeForm.licWrtofDetailNo" type="text" placeholder="核销货物序号" @keyup.native="setFocus" :disabled="editORshow"></Input>
                </FormItem>
                <FormItem label="核销数量" prop="licWrtofQty">
                    <Input v-model="goodsAptitudeForm.licWrtofQty" type="text" placeholder="核销数量" @keyup.native="setFocus" :disabled="editORshow"></Input>
                </FormItem>
            </Form>
            <div class="btn-box">
                <Button type="primary" @click="addHandle" :disabled="editORshow">新增</Button>
                <Button type="primary" @click="saveHandle" :disabled="editORshow">保存</Button>
                <Button type="primary" @click="removeHandle" :disabled="editORshow">删除</Button>
                <Button type="primary" @click="VINinfoHandle" :disabled="editORshow">许可证VIN信息</Button>
            </div>
            <div class="table-Modal">
                <table class="layui-hide" id="aptitudeTableId" lay-filter="aptitudeTable"></table>
                <Table
                    border
                    ref="table"
                    :columns="tableColumns"
                    :data="tableList"
                    @on-row-click="selectDataHandle"
                    @on-selection-change="handleSelectionChange"
                />
            </div>
            <div slot="footer">
                <Button type="default" @click="closeModel">取消</Button>
                <Button type="primary" @click="saveGoodsAptitude">确定</Button>
            </div>
        </Modal>
        <VINAptitudeModal ref="VINAptitudeModalRef" @saveVINAptitude="saveVINAptitude" />
    </div>
</template>

<script>
import RemoteSearch from '@/view/components/RemoteSearch'
import VINAptitudeModal from './VINAptitudeModal'
import $ from 'jquery'
const goodsLimitListJK = [
    { dataCode: '105', dataName: '兽医(卫生)证书' },
    { dataCode: '106', dataName: '动物检疫证书' },
    { dataCode: '107', dataName: '植物检疫证书' },
    { dataCode: '108', dataName: '重量证书' },
    { dataCode: '109', dataName: 'TCK检验证书（美国小麦）' },
    { dataCode: '110', dataName: '熏蒸证书' },
    { dataCode: '111', dataName: '放射性物质检测合格证明' },
    { dataCode: '112', dataName: '木材发货检验码单' },
    { dataCode: '113', dataName: '原产地证书（证明）' },
    { dataCode: '114', dataName: '中转进境确认证明文件（经港澳地区中转入境水果）' },
    { dataCode: '115', dataName: '入口检测报告' },
    { dataCode: '116', dataName: '货物进口证明书' },
    { dataCode: '117', dataName: '进出口货物征免税证明' },
    { dataCode: '203', dataName: '出入境特殊物品卫生检疫审批' },
    { dataCode: '325', dataName: '进境动植物检疫许可证' },
    { dataCode: '328', dataName: '同意调入函（植物繁殖材料）' },
    { dataCode: '330', dataName: '农业转基因生物安全证书（进口）' },
    { dataCode: '331', dataName: '引进林木种子、苗木检疫审批单' },
    { dataCode: '332', dataName: '国（境）外引进农业种苗检疫审批单' },
    { dataCode: '401', dataName: '进出口商品免验' },
    { dataCode: '402', dataName: '进口旧机电产品备案' },
    { dataCode: '408', dataName: '汽车预审备案' },
    { dataCode: '409', dataName: '免于强制性认证特殊用途进口汽车检测处理程序车辆' },
    { dataCode: '410', dataName: '免予办理强制性产品认证证明' },
    { dataCode: '411', dataName: '强制性产品认证（CCC认证）证书' },
    { dataCode: '412', dataName: '进口涂料备案' },
    { dataCode: '416', dataName: '进口棉花境外供货商登记注册' },
    { dataCode: '422', dataName: '进口废物原料装运前检验证书' },
    { dataCode: '423', dataName: '进境旧机电境外预检验证书' },
    { dataCode: '424', dataName: '境外捐赠机构登记和捐赠医疗器械备案材料' },
    { dataCode: '428', dataName: '进口食品接触产品备案书' },
    { dataCode: '429', dataName: '进口特种设备型式试验证书' },
    { dataCode: '430', dataName: '境外特种设备制造许可证' },
    { dataCode: '516', dataName: '进口化妆品产品备案' },
    { dataCode: '517', dataName: '进口预包装食品标签备案' },
    { dataCode: '519', dataName: '进口食品境外生产企业注册' },
    { dataCode: '522', dataName: '水果预检验证书' },
    { dataCode: '523', dataName: '进口化妆品产品套装备案' },
    { dataCode: '524', dataName: '进口食品境外生产企业信息记录' },
    { dataCode: '526', dataName: '进口（非）特殊用途化妆品行政许可批件' },
    { dataCode: '527', dataName: '婴幼儿配方乳粉配方注册证明文件（进口）' },
    { dataCode: '528', dataName: '特殊医学用途配方食品注册证书（进口）' },
    { dataCode: '529', dataName: '保健食品注册证书或保健食品备案凭证（进口）' },
    { dataCode: '530', dataName: '新食品原料/无国标食品许可证明' },
    { dataCode: '601', dataName: '进口其他证书' },
    { dataCode: '603', dataName: '进口车辆识别代码（VIN）校验报告单' },
    { dataCode: '604', dataName: '型式试验合格证明（首次进口压力管道元件）' },
    { dataCode: '605', dataName: '实施金伯利进程国际证书制度注册登记证' },
    { dataCode: '606', dataName: '允许进出口证明书/中华人民共和国野生动植物进出口说明书/非《进出口野生动植物种商品目录》物种' },
    { dataCode: '607', dataName: '限制类环保证书' },
    { dataCode: '608', dataName: '药品生产/经营许可证' },
    { dataCode: '609', dataName: '进口兽药注册证书' },
    { dataCode: '610', dataName: '机动车进口许可证' },
    { dataCode: '611', dataName: '进口饲料和饲料添加剂产品登记证' },
    { dataCode: '612', dataName: '进口医疗器械注册证' },
    { dataCode: '613', dataName: '能源效率标识备案' },
    { dataCode: '629', dataName: '进口医疗器械备案证' },
    { dataCode: '800', dataName: '准入肉类名单' },
    { dataCode: '900', dataName: '进口肉类名录' }
]
const goodsLimitListCK = [
    { dataCode: '103', dataName: '直通放行申请' },
    { dataCode: '203', dataName: '出入境特殊物品卫生检疫审批' },
    { dataCode: '401', dataName: '进出口商品免验' },
    { dataCode: '404', dataName: '出口产品型式试验' },
    { dataCode: '417', dataName: '出口玩具质量许可（注册登记）' },
    { dataCode: '425', dataName: '出境危险货物运输包装使用鉴定结果单' },
    { dataCode: '426', dataName: '出境危险货物运输包装性能检验结果单' },
    { dataCode: '429', dataName: '进口特种设备型式试验证书' },
    { dataCode: '518', dataName: '出口食品生产企业备案' },
    { dataCode: '519', dataName: '进口食品境外生产企业注册' },
    { dataCode: '522', dataName: '水果冻肉预检验证书' },
    { dataCode: '526', dataName: '进口（非）特殊用途化妆品行政许可批件' },
    { dataCode: '527', dataName: '婴幼儿配方乳粉配方注册证明文件（进口）' },
    { dataCode: '528', dataName: '特殊医学用途配方食品注册证书（进口）' },
    { dataCode: '529', dataName: '保健食品注册证书或保健食品备案凭证（进口）' },
    { dataCode: '530', dataName: '新食品原料/无国标食品许可证明' },
    { dataCode: '602', dataName: '出口其他证书' },
    { dataCode: '614', dataName: '允许进出口证明书/中华人民共和国野生动植物进出口说明书/非《进出口野生动植物种商品目录》物种证明' },
    { dataCode: '615', dataName: '捕捞船舶登记证和捕捞许可证（野生捕捞水生动物）' },
    { dataCode: '616', dataName: '化妆品生产许可证(仅限首次出口时提供)' },
    { dataCode: '617', dataName: '特殊用途销售包装化妆品成品应当提供相应的卫生许可批件' },
    { dataCode: '618', dataName: '危险特性分类鉴别报告' },
    { dataCode: '619', dataName: '型式试验报告' },
    { dataCode: '620', dataName: '动物检疫合格证明（国产原料）；进境货物检疫证明、原产国检验证书（进口原料）' },
    { dataCode: '621', dataName: '出口检测报告' },
    { dataCode: '622', dataName: '微生物检测报告（沙门氏菌、产志贺毒素大肠杆菌、金黄色葡萄球菌、单增李斯特菌）' },
    { dataCode: '623', dataName: '出口水产品成品检验报告' },
    { dataCode: '624', dataName: '检验检疫机关出具的分类定级试验报告和12米跌落试验合格报告' },
    { dataCode: '626', dataName: '出口水产品原料供货证明（养殖水产品）' },
    { dataCode: '627', dataName: '出口加工用动物源性食品原料供货证明(水产原料)' },
    { dataCode: '628', dataName: '采购备案单位商品的需提供备案证明' }
]
export default {
    name: 'GoodsAptitudeModal',
    props: {
        value: {
            default: false,
            type: Boolean
        },
        goodsAptitude: {
            default: function () {
                return {
                    CustomsDeclareGoodsNewDate: {},
                    editORshow: false,
                    type: ''
                }
            },
            type: Object
        }
    },
    components: {
        VINAptitudeModal,
        RemoteSearch
    },
    data () {
        return {
            editORshow: false,
            // 商品信息
            goodsInfo: {
                codeTs: '', // 商品编码
                goodsName: '', // 商品名称
                ciqName: '', // 检验检疫名称
                contrItem: '', // 备案序号
                declareGoodsId: '' // 商品id
            },
            goodsAptitudeForm: {
                declareGoodsId: '',
                goodsLimitId: '',
                goodsNo: '', // 序号
                licTypeCode: '', // 许可证类别
                licTypeName: '', // 许可证名称
                licenceNo: '', // 许可证编号
                licWrtofDetailNo: '', // 核销货物序号
                licWrtofQty: '', // 核销数量
                customsGoodsLimitVins: [] // 许可证
            },
            goodsLimitList: [],
            tableList: [],
            tableColumns: [
                {
                    type: 'selection',
                    width: 30,
                    align: 'center'
                },
                {
                    type: 'index',
                    width: 50,
                    align: 'center',
                    title: '序号'
                },
                {
                    title: '许可证类别代码',
                    width: 120,
                    align: 'center',
                    key: 'licTypeCode'
                },
                {
                    title: '许可证类别名称',
                    align: 'center',
                    render (h, { row }) {
                        const v = row.licTypeName
                        return h('span', {
                            domProps: {
                                innerHTML: v,
                                title: v
                            }
                        })
                    }
                },
                {
                    title: '许可证编号',
                    width: 140,
                    align: 'center',
                    render (h, { row }) {
                        const v = row.licenceNo
                        return h('span', {
                            domProps: {
                                innerHTML: v,
                                title: v
                            }
                        })
                    }
                },
                {
                    title: '核销货物序号',
                    width: 100,
                    align: 'center',
                    key: 'licWrtofDetailNo'
                },
                {
                    title: '核销数量',
                    width: 100,
                    align: 'center',
                    key: 'licWrtofQty'
                }
            ],
            rule: {
                licTypeCode: [
                    { required: true, message: '请选择许可证类别', trigger: 'change' }
                ],
                licenceNo: [
                    { required: true, message: '请输入许可证编号', trigger: 'blur' },
                    { type: 'string', max: 20, message: '许可证编号最大长度为20', trigger: 'blur' }
                ]
            }
        }
    },
    created () {
        this.checkedTableList = []
        let data = this.goodsAptitude
        this.init(data.CustomsDeclareGoodsNewDate, data.editORshow, data.type)
    },
    methods: {
        init (data, editORshow, type) {
            this.editORshow = editORshow
            this.goodsInfo.codeTs = data.codeTs || ''
            this.goodsInfo.goodsName = data.goodsName || ''
            this.goodsInfo.ciqName = data.ciqName || ''
            this.goodsInfo.contrItem = data.contrItem || ''
            this.goodsInfo.declareGoodsId = data.declareGoodsId || ''
            this.goodsLimitList = /^(j|J)/.test(type) ? goodsLimitListJK : goodsLimitListCK
            // 初始化TABLE数据
            this.checkedTableList = []
            this.tableList = (data.customsGoodsLimitNewVos || []).map((item, i) => {
                const {
                    customsGoodsLimitVins,
                    declareGoodsId,
                    goodsLimitId,
                    licTypeCode,
                    licWrtofDetailNo,
                    licWrtofQty,
                    licenceNo
                } = item
                const licType = licTypeCode && this.goodsLimitList.find(goods => licTypeCode == goods.dataCode) || ''
                return {
                    declareGoodsId,
                    goodsLimitId,
                    licTypeCode,
                    licWrtofDetailNo,
                    licWrtofQty,
                    licenceNo,
                    licTypeName: licType && licType.dataName || '',
                    goodsNo: i + 1,
                    customsGoodsLimitVins: customsGoodsLimitVins.slice()
                }
            })
            setTimeout(() => {
                this.addHandle()
                let ele = $('.goods-aptitude-modal .ivu-form > .licTypeCode').find('input')
                $(ele).focus()
            }, 500)
        },
        // table  多选
        handleSelectionChange (list) {
            this.checkedTableList = list.slice()
        },
        // 单击选中，编辑
        selectDataHandle (data, index) {
            for (let i in this.goodsAptitudeForm) {
                this.goodsAptitudeForm[i] = data[i]
            }
            this.$refs.table.toggleSelect(index)
        },

        closeModel () {
            this.$emit('saveGoodsAptitude', this.tableList) // 中联客户喜欢直接保存后，关闭弹窗，不点击确定，所以关闭时保存数据(TAPD:1026568)
            this.addHandle()
            this.$emit('input', false)
        },

        // 保存
        saveHandle () {
            this.$refs['goodsAptitudeFormRef'].validate((valid) => {
                if (valid) {
                    let data = JSON.parse(JSON.stringify(this.goodsAptitudeForm))
                    // 编辑数据
                    const index = data.goodsNo ? (data.goodsNo - 1) : -1
                    const licTypeCode = data.licTypeCode
                    // 校验是否存在重复的许可证类别
                    const target = this.tableList.findIndex((item, i) => item.licTypeCode === licTypeCode && i != index)
                    if (target >= 0) {
                        this.$Message.warning('已经存在相同许可证类别,不能重复添加！')
                        return
                    }
                    // 判断新增 编辑
                    if (index < 0) {
                        data.declareGoodsId = this.goodsInfo.declareGoodsId
                        data.goodsNo = this.tableList.length + 1
                        this.tableList.push(data)
                    } else {
                        this.tableList.splice(index, 1, data)
                    }
                    // 清空多选
                    this.checkedTableList = []
                    // 清空表单
                    this.addHandle()
                }
            })
        },

        // 清空表单
        addHandle () {
            Object.keys(this.goodsAptitudeForm).forEach(k => {
                this.goodsAptitudeForm[k] = ''
            })
            this.goodsAptitudeForm.customsGoodsLimitVins = []
            this.$nextTick(() => {
                this.$refs['goodsAptitudeFormRef'] && this.$refs['goodsAptitudeFormRef'].resetFields()
            })
        },
        // 删除表单
        removeHandle () {
            const goodsNoList = this.checkedTableList.map(item => item.goodsNo)
            if (goodsNoList.length === 0) {
                this.$Message.warning('请先选择要删除的数据!')
                return false
            }
            let list = this.tableList.filter(item => !goodsNoList.includes(item.goodsNo))
            // 重新排序
            list.forEach((item, i) => {
                item.goodsNo = i + 1
            })
            this.tableList = list.slice()
            // 清空多选内容
            this.checkedTableList = []
        },

        // 编辑许可证VIN信息
        VINinfoHandle () {
            let len = this.checkedTableList.length
            if (len === 0) {
                this.$Message.warning('请先选择数据!')
                return false
            }
            if (len > 1) {
                this.$Message.warning('只能选择1条数据!')
                return false
            }
            this.$refs.VINAptitudeModalRef.init(this.checkedTableList)
        },

        // 保存许可证信息
        saveGoodsAptitude () {
            // 去掉不需要的字段
            for (let i = 0; i < this.tableList.length; i++) {
                let item = this.tableList[i].customsGoodsLimitVins
                let itemLen = item.length
                if (itemLen > 0) {
                    for (let j = 0; j < itemLen; j++) {
                        delete item[j].numId
                        item[j].billLadDate = item[j].billLadDate ? Date.parse(new Date(item[j].billLadDate)) : ''
                    }
                }
                this.tableList[i].goodsNo = i + 1
            }
            this.closeModel()
        },

        // 保存 VIN信息
        saveVINAptitude (res) {
            let index = res.index - 1
            this.$set(this.tableList[index], 'customsGoodsLimitVins', res.list)
            this.checkedTableList[0].customsGoodsLimitVins = res.list // 20190724同步当前选中的数据
        },

        setFocus (e) {
            if (e.keyCode === 13) {
                let target = $(e.target).parents('.ivu-form-item').next()

                if (target.find('.ivu-select-disabled').length > 0) {
                    target = target.next()
                }

                if (target.length === 0) { // 最后一个输入框
                    this.saveHandle()
                }

                if (target.find('.ivu-select-input').length) {
                    target.find('.ivu-select-input').focus()
                } else if (target.find('.ivu-input').length) {
                    target.find('.ivu-input').focus()
                }
            }
        }

    } // methods end
}
</script>

<style lang="less">
    .goods-aptitude-modal {
        input, .ivu-select-selection {
            width: 210px !important;
        }

        .btn-box {
            margin-bottom: 10px;
            button {
                margin-right: 10px;
            }
        }
    }
</style>
